<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jquery</title>
</head>
<body>
  
  <input type="file" id="file1">
  <button id="btnUpload">上传文件</button><br>
  <img src="../image/1.jpg" alt="" style="display: none;" id="loading">
  
  <script src="./jquery-3.6.0/jQuery3.6.js"></script>
  <script>
    $(function(){
      //监听到Ajax请求被发起了
      $(document).ajaxStart(function(){
        $('#loading').show()
      })

      // 监听ajax请求结束
      $(document).ajaxStop(function(){
        $('#loading').hide()
      })


      $('#btnUpload').on('click', function(){
        var files = $('#file1')[0].files;
        console.log(files);
        if(files.length <= 0){
          alert("请选择上传文件");
        }else{
          var fd = new FormData();
          fd.append("avatar", files[0]);

          // 发起 jQuery 的 Ajax 请求，上传文件
          $.ajax({
            type: 'POST',
            url: 'http://www.liulongbin.top:3006/api/upload/avatar',
            data: fd,
            // 不修改 Content-Type 属性,使用 FormData 默认的Conent-Type
            processData: false,
            // 不对 FormData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器
            contentType: false,
            success: function(res){
              console.log(res);
            }
          })
        }

      })
    })
  </script>
</body>
</html>